<template>
	<view>
		<uni-nav-bar :border="false" backgroundColor="#f87531" statusBar></uni-nav-bar>
		<view class="top">
			<!-- 未登录 -->
			<view v-if="!isLogin" class="unlogin">
				<view>登陆后现金红包天天领</view>
				<view @click="toLogin()">登录查看余额</view>
			</view>
			<!-- 登录 -->
			<view v-else class="login" @click="checkEntrance(toEarnings)">
				<view>
					<view>
						<view>金币收益</view>
						<view>
							<span>{{ user.integral }}</span>
							币 >
						</view>
					</view>
					<view>
						<view>现金收益</view>
						<view>
							<span>0</span>
							元 >
						</view>
					</view>
				</view>
				<view>金币每天凌晨自动兑换成现金（兑换可能存在延迟）</view>
			</view>
			<!-- 新人福利 -->
			<!-- 未登录 -->
			<view v-if="!isLogin" class="new">
				<view>新人福利</view>
				<view>
					<view>
						<view>
							<view>提现1元到微信</view>
							<view>
								<image src="../../static/hongbao.png" mode="widthFix"></image>
								<view>1元</view>
							</view>
						</view>
						<view>立即提现到微信!秒到账!</view>
					</view>
					<view @click="checkEntrance(toRead)">立即提现</view>
				</view>
			</view>
			<!-- 登录 -->
			<view v-else class="new">
				<view>新人福利</view>
				<view>
					<view>
						<view>
							<view>提现1元到微信</view>
							<view>
								<image src="../../static/hongbao.png" mode="widthFix"></image>
								<view>1元</view>
							</view>
						</view>
						<view>今日阅读5分钟，即可提现1元</view>
					</view>
					<view @click="toRead()">立即阅读</view>
				</view>
			</view>
		</view>
		<!-- 福利列表 -->
		<view class="list">
			<view>日常福利</view>
			<uni-list>
				<!-- 1: 签到 -->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>签到领金币</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>188金币</view>
								</view>
							</view>
							<view>连续签到7天可获得2元提现特权</view>
						</view>
						<!-- 登陆后签到弹窗 -->
						<uni-popup ref="popup" :isMaskClick="false">
							<view class="pop">
								<view>今日签到</view>
								<view>
									<view>连续签到7天可得2元体现特权</view>
									<view>
										<uni-steps
											:options="options"
											:active="active"
											deactiveColor="#fee2b2"
											activeColor="#ff651f"
										></uni-steps>
										<view style="margin-top: 20rpx;display: flex;justify-content: space-around;">
											<view v-for="(item, index) in option2" :key="index">
												<image src="../../static/coin.png" mode="widthFix" style="width: 50rpx;"></image>
												<view style="color: #999;font-size: 22rpx;line-height: 22rpx;">{{ item }}</view>
											</view>
										</view>
									</view>
								</view>
								<view class="btn-sign" v-show="sign" @click="signIn()">
									{{ this.active == 6 ? '已连续签到七天' : '已签到' }}
								</view>
								<view class="btn-sign" v-show="!sign" @click="signIn()">{{ signValue }}</view>
							</view>
							<!-- 关闭按钮 -->
							<view class="close" @click="close">
								<uni-icons type="closeempty" color="#f1f1f1" size="22"></uni-icons>
							</view>
						</uni-popup>
						<view @click="checkEntrance(toSignIn)">去签到</view>
					</view>
				</uni-list-item>
				<!-- 2: 7天回归 -->
				<!-- <uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>老用户7天回归礼</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>1000金币</view>
								</view>
							</view>
							<view>2.23-3.1期间，每天可领取奖励</view>
						</view>
						<view>立即领取</view>
					</view>
				</uni-list-item> -->
				<!-- 3: 抽奖  -->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>幸运大转盘</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>海量金币</view>
								</view>
							</view>
							<view>小手快来抖一抖，海量金币赢不停</view>
						</view>
						<view @click="checkEntrance(goTo)">去抽奖</view>
					</view>
				</uni-list-item>
				<!-- 4: 看广告	-->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>看广告赚金币</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>2200金币</view>
								</view>
							</view>
							<view>看广告赚金币</view>
						</view>
						<view @click="checkEntrance(show)">去观看</view>
					</view>
				</uni-list-item>
				<!-- 5: 加入书架 -->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>加入书架</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>200金币</view>
								</view>
							</view>
							<view>将书城任一本书加入书架</view>
						</view>
						<view @click="toIndex()">去书城</view>
					</view>
				</uni-list-item>
				<!-- 6: 阅读30秒 -->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>阅读30秒最高奖励</view>
								<view>
									<image src="../../static/coin.png" mode="widthFix"></image>
									<view>5000金币</view>
								</view>
							</view>
							<view>读书时间越长，累积获得的金币越多</view>
						</view>
						<view>去阅读</view>
					</view>
				</uni-list-item>
				<!--  -->
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>邀请好友</view>
								<view>
									<image src="../../static/hongbao.png" mode="widthFix"></image>
									<view>166金币</view>
								</view>
							</view>
							<view>连续签到7天可获得2元提现特权</view>
						</view>
						<view>去签到</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body" class="list-cell">
						<view>
							<view>
								<view>填写邀请码</view>
								<view>
									<image src="../../static/hongbao.png" mode="widthFix"></image>
									<view>1元</view>
								</view>
							</view>
							<view>连续签到7天可获得2元提现特权</view>
						</view>
						<view>去签到</view>
					</view>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import moment from 'moment';
export default {
	data() {
		return {
			options: [
				{ title: '1天' },
				{ title: '2天' },
				{ title: '3天' },
				{ title: '4天' },
				{ title: '5天' },
				{ title: '6天' },
				{ title: '7天' }
			],
			option2: ['188', '388', '688', '888', '888', '888', '888'],
			active: uni.getStorageSync('user').continuous - 1

			// signValue:null,
		};
	},
	computed: {
		...mapState(['user', 'isLogin', 'sign']),
		signValue() {
			return `立即签到 + ${this.option2[this.active + 1]} 金币`;
		}
		// sign(){
		// 	return uni.getStorageSync('sign')
		// }
	},
	// watch: {
	// 	sign(newValue) {
	// 		 this.signValue=newValue?'已签到':`立即签到 + ${this.option2[this.active + 1]} 金币`
	// 	}
	// },
	methods: {
		...mapMutations(['updateSign']),
		// 跳转金币收益
		toEarnings() {
			uni.navigateTo({
				url: '../earnings/earnings'
			});
		},
		// 跳转页面 抽奖
		goTo() {
			uni.navigateTo({
				url: '../wheelsurf/wheelsurf'
			});
		},
		// 跳转书城首页
		toIndex() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		// 去登录
		toLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		// 验证入口 福利页面登陆后才可继续进行其他操作
		checkEntrance(fn) {
			!this.isLogin ? this.toLogin() : fn();
		},
		// 新人福利 阅读提现
		toRead() {
			console.log('toRead');
		},
		// 签到弹窗
		toSignIn() {
			this.$refs.popup.open();
		},
		// 关闭签到弹窗
		close() {
			this.$refs.popup.close();
		},
		signIn() {
			// 1.1如果已签到则不能再次点击
			if (this.sign) return;
			// // 如果连续签到七天 (暂时)
			if (this.active >= 6) this.active = -1;
			console.log(this.active);
			// 判断是否为连续签到

			// 4.设置当前时间 以及过期时间
			let nowTemp = new Date().getTime(); //获取当前时间戳
			// 获取第二天零点时间戳
			let temorrow =
				moment()
					.add(1, 'days')
					.format()
					.substr(0, 10) + ' 00:00:00';
			let temorrowTemp = new Date(temorrow).getTime();
			let exp = temorrowTemp - nowTemp;
			console.log(nowTemp, exp);
			let integral =
				this.active + 1 > 6
					? this.user.integral + this.option2[this.active - 6] * 1
					: this.user.integral + this.option2[this.active + 1] * 1;
			// 5.更新数据库
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/user/signIn`,
				method: 'PUT',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					id: this.user.id,
					integral: integral,
					date: moment().format('L'),
					days: this.user.days + 1,
					continuous: this.active + 1
				},
				success: res => {
					console.log(res);
					if (res.data.code == 200) {
						// 1.修改视图
						this.active = this.active >= 0 ? this.active + 1 : 0;
						// 2.修改user数据 更新本地
						this.user.continuous = this.active + 1;
						this.user.date = moment().format('L'); // 2022/04/06  当前签到日期
						this.user.days += 1;
						this.user.integral = integral;
						console.log(this.user);
						this.$store.commit('updateUser', this.user);
						// uni.setStorageSync('user',this.user)
						// 3.签到状态设置为true 按钮变为已签到并缓存本地
						// this.sign = true;
						this.updateSign(true);
						// uni.setStorageSync('sign',true)
						// 4.缓存当前时间 以及过期时间
						uni.setStorageSync('update', { nowTemp, exp });
					}
				}
			});
		},
		// 显示激励视频
		show() {
			if (this._isLoaded) {
				console.log(111)
				this._rewardedVideoAd.show();
			}
		},
		// 更新签到状态
		resetSign() {
			let nowTemp = new Date().getTime();
			let lastTemp = uni.getStorageSync('update').nowTemp;
			let exp = uni.getStorageSync('update').exp;
			// 如果sign不存在 或者 sign为true且 距离上次记录时间>过期时间 修改签到状态为false
			if (
				uni.getStorageSync('sign') === null ||
				(uni.getStorageSync('sign') === true && nowTemp - lastTemp > exp)
			) {
				uni.setStorageSync('sign', false);
			} else if (uni.getStorageSync('sign') === false && nowTemp - lastTemp > exp) {
				// sign为false 且距离上次记录时间>过期时间 说明未连续签到 修改user中continuous 为0
				let user = uni.getStorageSync('user');
				user.continuous = 0;
				uni.setStorageSync('user', user);
			}
		}
	},
	onReady() {
		// 激励视频广告组件 初始化
		this._isLoaded = false;
		let rewardedVideoAd = this._rewardedVideoAd = uni.createRewardedVideoAd({ adpid: '1507000689' }); // 仅用于HBuilder基座调试 adpid: '1507000689'
		rewardedVideoAd.onLoad(() => {
			this._isLoaded = true;
			console.log('onLoad event');
			// 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
		});
		rewardedVideoAd.onError(err => {
			console.log('onError event', err);
		});
		rewardedVideoAd.onClose(res => {
			console.log('onClose event', res);
		});
		
		// 签到初始化
		if(this.isLogin)this.resetSign()
	},

};
</script>

<style lang="scss" scoped>
page {
	background-color: #fafafa;
}
.container {
	padding: 0 40rpx;
}
.top {
	// 未登录
	.unlogin {
		background-color: #f87531;
		padding: 20rpx 40rpx;
		> view:first-child {
			color: #f8fdd2;
			font-size: 42rpx;
		}
		> view:last-child {
			margin: 30rpx 0;
			padding: 10rpx 30rpx;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #f8fdd2;
			color: #f87531;
			// font-weight: 600;
			font-size: 32rpx;
		}
		&::after {
			content: '';
			position: absolute;
			left: 0;
			width: 100%;
			height: 40rpx;
			border-radius: 50%;
			background-color: #f87531;
		}
	}
	// 登录
	.login {
		background-color: #f87531;
		padding: 20rpx 40rpx;
		color: #f8fdd2;
		> view:first-child {
			width: 100%;
			display: flex;
			justify-content: space-between;
			> view {
				width: 48%;
				> view:last-child {
					margin: 20rpx 0;
					> span {
						font-size: 60rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
		> view:last-child {
			margin-bottom: 20rpx;
			font-size: 26rpx;
		}
		&::after {
			content: '';
			position: absolute;
			left: 0;
			width: 100%;
			height: 40rpx;
			border-radius: 50%;
			background-color: #f87531;
		}
	}
	.new {
		padding: 40rpx 40rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		> view:first-child {
			font-size: 36rpx;
			// font-weight: 600;
			margin-bottom: 20rpx;
		}
		> view:last-child {
			display: flex;
			justify-content: space-between;
			align-items: center;
			> view:first-child {
				> view:first-child {
					display: flex;
					> view:nth-child(2) {
						padding: 0 10rpx;
						display: flex;
						align-items: center;
						color: red;
						image {
							width: 32rpx;
							margin-right: 8rpx;
						}
					}
				}
				> view:last-child {
					font-size: 26rpx;
					color: #e0b777;
					margin-top: 8rpx;
				}
			}
			// 立即提现
			> view:last-child {
				padding: 10rpx 20rpx;
				background-color: #ff604f;
				color: #fff;
				border-radius: 32rpx;
			}
		}
	}
}

// 日常福利
.list {
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 40rpx;
	> view:first-child {
		font-size: 36rpx;
		margin: 20rpx 0;
	}
	/deep/.uni-list-item__container {
		padding: 12px 0;
	}
	.list-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		> view:first-child {
			> view:first-child {
				display: flex;
				> view:nth-child(2) {
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					color: #feb200;
					image {
						width: 32rpx;
						margin-right: 8rpx;
					}
				}
			}
			> view:last-child {
				font-size: 26rpx;
				color: #e0b777;
				margin-top: 8rpx;
			}
		}
		// btn
		> view:last-child {
			width: 180rpx;
			padding: 10rpx 0;
			background-color: #fafafa;
			color: #ff604f;
			text-align: center;
			font-size: 30rpx;
			border-radius: 32rpx;
		}
	}
}
// 签到弹出层
.pop {
	box-sizing: border-box;
	width: 660rpx;
	padding: 20rpx;
	background-color: #ff5e16;
	border-radius: 20rpx;
	> view:first-child {
		text-align: center;
		color: #feeba7;
		font-weight: 600;
		font-size: 36rpx;
		padding: 20rpx;
	}
	> view:nth-child(2) {
		overflow: hidden;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #fff7ec;
		> view:first-child {
			color: #999;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
		> view:first-child {
			background-color: #fdecd2;
			padding: 20rpx;
		}
		> view:last-child {
			padding: 40rpx;
			background-color: #fff7ec;
		}
	}
	> .btn-sign {
		padding: 20rpx 40rpx;
		width: 70%;
		margin: 40rpx auto 30rpx;
		border-radius: 42rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #8e5e18;
		background-color: #feea8d;
		background-image: linear-gradient(90deg, #feea8d 0%, #fcbb4f 100%);
	}
}
.close {
	margin: 60rpx auto;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
